<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue组件学习</title>
    <!-- Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。 -->

    <link rel="stylesheet" href="assets/css/style.css" />
</head>

<body>
    <div id="app">
        <my-component>
        </my-component>
    </div>
</body>
<script src="assets/js/vue.js"></script>
<script>
    // 1. Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器。 
    // 2. Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。 
    // 3. 使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。 
    // 4. 组件应该挂载到某个Vue实例下，否则它不会生效

    //创建一个组件构造器
    var mycomponent = Vue.extend(
        {
            template: '<div> vue  组件</div>'
        }
    );

    //注册组件
    Vue.component("my-component", mycomponent);

    new Vue({
        el: "#app"
    });

</script>

</html>